<template>
  <div :class="className">
    <video
      ref="flv"
      class="video-center"
      autoplay
      controls
      webkit-playsinline="true"
      x-webkit-airplay="true"
      playsinline="true"
      x5-video-player-type="h5"
      x5-video-orientation="h5"
      x5-video-player-fullscreen="true"
      preload="auto"></video>
    <!-- <div class="cover" v-if="isCover">
      <div class="btn btn-play" @click="play">
        <i class="fa fa-play-circle-o"></i>
      </div>
    </div> -->
  </div>
</template>
<script>
import flvjs from 'flv.js';
// 组件可用的文档：https://gitee.com/mirrors/flv-js/blob/master/docs/api.md
// 该组件使用中尽量自测，如有问题则通过this.$emit('planB');向父级申请备用方案，并销毁自身创建的对象

export default {
  name: 'flvjs',
  props: {
    className: {
      type: Array,
      default: () => {
        return ['video-box', 'box-16b9'];
      },
    },
    vData: {
      type: Object,
      default: () => {
        return {
          poster: '',
          urlVideo: '',
        };
      },
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      isCover: true,
      player: null,
      playerOption: {
        type: 'flv',
        isLive: true,
        hasAudio: true,
      },
    };
  },
  methods: {
    play() {
      let tVue = this;
      let videoDom = this.$refs.flv;
      this.player.attachMediaElement(videoDom);
      this.player.load();
      this.player
        .play()
        .then((res) => {
          tVue.isCover = false;
        })
        .catch((err) => {
          this.$emit('planB', 'c');
        });
      this.player.on(flvjs.Events.ERROR, (e) => {
        console.error(e);
        this.$emit('planB', 'b');
      }); //绑定error事件，切换方案
    },
  },
  mounted() {
    console.log(this.vData.urlVideo);
    let isSupported = flvjs.isSupported();
    // this.$store.commit('setSupported',{k:'flvjs',v:isSupported})
    //预判组件支持
    if (isSupported) {
      let opt = Object.assign(this.playerOption, {
        url: this.vData.urlVideo,
      });
      this.player = new flvjs.createPlayer(opt);
      //不要期待直接调用this.play()会有效果
    } else {
      this.$emit('planB', 'a'); //切换方案
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
    }
  }, //切换方案前尽量手动销毁组件
};
</script>
<style lang="less">
.video-box {
  width: 100%;
  height: 100%;
}
</style>